<template>
<div class="wrapper-honor-container">
  <no-data v-if="honor1 === 0 && honor2 === 0 && honor3 ===0" :content="noContent" img="empty.png"></no-data>
  <div class="wrapper-honor" v-else>
    <div class="honor-item-wrapper" v-if="honor1 !== 0">
      <div class="detail_title">举国无双</div>
      <div class="detail_desc" style="opacity: 0.5;">单次捐赠专注豆数超过500获得</div>
      <div class="honor-medal-wrapper">
        <div class="honor-medal-1" v-for="(item, idx) in honor1" :key="idx">
          <img src="../assets/images/icon_1.png" class="honor-1" />
        </div>
      </div>
    </div>
    
    <div class="honor-item-wrapper" v-if="honor2 !== 0">
      <div class="detail_title">大爱无疆</div>
      <div class="detail_desc" style="opacity: 0.5;">单次捐赠专注豆数超100获得</div>
      <div class="honor-medal-wrapper">
        <div class="honor-medal-2" v-for="(item, idx) in honor2" :key="idx">
          <img src="../assets/images/icon_3.png" class="honor-2" />
        </div>
      </div>
    </div>

    <div class="honor-item-wrapper" v-if="honor3 !== 0">
      <div class="detail_title">小善大爱</div>
      <div class="detail_desc" style="opacity: 0.5;">单次捐赠专注豆数超过1获得</div>
      <div class="honor-medal-wrapper">
        <div class="honor-medal-3" v-for="(item, idx) in honor3" :key="idx">
          <img src="../assets/images/icon_2.png" class="honor-3" />
        </div>
      </div>
    </div>

  </div>
</div>
</template>

<script>
import noData from '../components/no-data.vue'

export default {
  components: {
    noData,
  },
  data() {
    return {
      honor1: 0,
      honor2: 0,
      honor3: 0,
      noContent: '暂无公益奖章',
    }
  },
  mounted() {
    this.honor1 = this.$route.query.moreCount || 0;
    this.honor2 = this.$route.query.commonCount || 0;
    this.honor3 = this.$route.query.lessCount || 0;
    enddelay_actions.postMessage(JSON.stringify(['share']))
    document.body.scrollTop = 0;
  }
}
</script>

<style lang="less" scoped>
.wrapper-honor-container {
  min-height: 100vh;
}
.wrapper-honor {
  padding: 32px;
  box-sizing: border-box;
  min-height: 100vh;
}
.honor-medal-wrapper {
  margin-bottom: 48px;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  .honor-medal-1 {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .honor-medal-2 {
    width: 33.33333%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .honor-medal-3 {
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .honor-1 {
    width: 180px;
    height: 193px;
    margin-right: 30px;
  }
  .honor-2 {
    width: 135px;
    height: 145px;
    margin-right: 20px;
  }
  .honor-3 {
    width: 85px;
    height: 94px;
    margin-right: 10px;
  }
}
</style>